<template>
  <div>
    <div @click="clickGoLiveDetail(item.lpId)" class="c-pv24 c-flex-row c-bd-b1" :key="index" v-for="(item,index) in liveList">
      <div class="c-ww180 c-hh120 c-text-hidden c-p c-br10">
        <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        <vip-status :item="item"></vip-status>
      </div>
      <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
        <div class="c-fs24 c-lh34 c-text-ellipsis1 c-fc-xblack">
          <span v-if="item.isSaleOut == 0" class="c-mr6 c-fs20 c-fc-white c-ph4 c-br-tr10 c-br-bl10 c-bg-ccc">已停售</span>{{item.name}}
        </div>
        <div>
          <div class="c-fs20 c-pv10 c-fc-gray" v-if="item.endDate">有效期至&ensp;{{item.endDate}}</div>
          <div class="c-fs20 c-pv10  c-fc-gray" v-if="item.isWatchTime==1">支持试看</div>
          <div class="c-flex-row c-justify-sb c-aligni-center">
            <span class="c-fc-xmlred c-fw600 c-fs0">
              <span v-if="item.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter(item.optimal)}}</span>
              <span :class="checkCnPrice(item.payType, item.price, 51) ? 'c-fs22' : 'c-fs26'">{{item.payType | priceValueFilter(item.price, 51, item.optimal)}}</span>
            </span>
            <div v-if="item.liveStatus==1" class="c-fs18 c-pl10 c-pr10 c-fc-white status-btn c-flex-row c-aligni-center c-justify-center status-1">
              <div class="c-flex-row c-aligni-end c-mr6">
                <span class="pillar"></span>
                <span class="pillar"></span>
                <span class="pillar"></span>
              </div>
              直播中
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
import vipStatus from '@/components/templates/common/vipStatus.vue'
import CoverImg from '@/components/templates/common/coverImg.vue';
export default {
  name: "LivePersonalItem",
  props: {
    liveList: {
      type: Array,
      default: () => []
    },
    isMy: {
      type: Boolean,
      default: false
    }
  },
  components: {
    vipStatus,
    CoverImg
  },
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      themeName: localStorage.getItem("themeName")
        ? localStorage.getItem("themeName")
        : "mb5"
    };
  },
  methods: {
    checkCnPrice(payType, price, prodType) {
      return utilJs.checkCnPrice(payType, price, prodType)
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickGoLiveDetail(liveId) {
      let toPath = `/homePage/live/livePersonalDetail?liveId=${liveId}`;
      this.iosAppRouteChange(toPath);
    }
  }
};
</script>

<style scoped lang="scss">
@function pxToRem($px) {
  //$rpx为需要转换的字号
  @return $px/40 + rem;
}
.status-expire {
  * {
    opacity: 0.75;
  }
}
.vipStatus {
  position: absolute;
  top: 0;
  left: 0;
  /* width: 2.5rem;
  height: 2.5rem; */
  width: 1.75rem;
  height: 1.75rem;
}
.status-btn{
  height: pxToRem(28);
  line-height:pxToRem(28);
  border-radius: pxToRem(15);
}
.pillar{
  width: 1px;
  margin: 0 1px;
  height: pxToRem(4);
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite  ease;
}
.pillar:first-child{
  animation-delay:0.5s;
}
.pillar:nth-child(2){
  animation-delay:1s;
}
.pillar:nth-child(3){
  animation-delay:1.5s;
}

.status-1 {
  background: linear-gradient(90deg, #30b656, rgba(48, 182, 86, 0.7));
}
@-webkit-keyframes pillarDance{
    0%{height:pxToRem(4);}
    50%{height:pxToRem(16);}
    100%{height:pxToRem(4);}
}
</style>
